// app.ts

import { Commit } from "vuex";
import { useStorage } from "@/library/storage";
import useLanguage from "@/hooks/useLanguage";
import { AppState, TagsType } from "../interface"
import { HOME_URL } from "@/config";

const { getStorage, setStorage } = useStorage("localStorage");
let cache = getStorage("app");

/**
 * 基础菜单（首页）
 */
export const baseNav: TagsType[] = [
  {
    path: HOME_URL,
    name: "home",
    meta: {
      title: "首页",  // 首页
      icon: "",
      cache: false,
    },
  }
]

const state: AppState = {
  // 初始状态
  i18n: true,
  language: useLanguage(),
  tagsnav: [...baseNav],
  collapse: false,
};

const mutations = {
  INIT_APP: (state: AppState, value?: "init") => {
    if (value === "init") {
      setStorage("app", state);
    } else {
      state = { ...cache };
    }
  },
  SWITCH_COlLAPSE: (state: AppState, value: any) => {
    state.collapse = value;
  },
  INIT_TAGSNAV: (state: AppState) => {
    state.tagsnav = (cache && cache.tagsnav.length > 0) ? [...cache.tagsnav] : [...baseNav];
    cache = getStorage("app");  // 重新获取cache(第一次获取为null)
  },
  ADD_TAG: (state: AppState, value: any) => {
    const tag = state.tagsnav.find((tag: any) => {
      return value.name == tag.name;
    });
    if (!tag) {
      state.tagsnav.push(value);
    }
    cache.tagsnav = state.tagsnav;
    setStorage("app", state);
  },
  DEL_TAG: (state: AppState, name: string) => {
    state.tagsnav = state.tagsnav.filter((item) => item.name !== name);
    cache.tagsnav = state.tagsnav;
    setStorage("app", state);
  },

  // 关闭左右两侧
  DEL_BOTH_TAG: (state: AppState, [path, direction]: [string, ("left" | "right")]) => {
    const index = state.tagsnav.findIndex((tag) => tag.path === path)
    if (index === -1) { return }

    const newTags = state.tagsnav.filter((tag, i) => {
      if (direction === "left") {
        return i >= index || tag.path === HOME_URL
      }

      return i <= index || tag.path === HOME_URL
    })

    state.tagsnav = [...newTags]
    cache.tagsnav = state.tagsnav
    setStorage("app", state);
  },

  // 关闭其他
  DEL_OTHER_TAG: (state: AppState, path: string) => {
    const newTags = state.tagsnav.filter((tag) => {
      return tag.path === path || tag.path === HOME_URL
    })

    state.tagsnav = [...newTags]
    cache.tagsnav = state.tagsnav
    setStorage("app", state);
  },

  // 关闭全部
  DEL_ALL_TAG: (state: AppState) => {
    state.tagsnav = [...baseNav];
    cache.tagsnav = state.tagsnav;
    setStorage("app", state);
  },

  // 设置国际化语言
  SET_LANGAUGE: (state: AppState, value: AppState['language']) => {
    state.language = value;
    setStorage("app", state);
  },
};

// actions
const actions = {
  init({ commit }: { commit: Commit }, value?: "init") {
    commit("INIT_APP", value);
  },
  switchCollapes({ commit }: { commit: Commit }, value: any) {
    commit("SWITCH_COlLAPSE", value);
  },
  initTags({ commit }: { commit: Commit }, value: any) {
    commit("INIT_TAGSNAV", value);
  },
  addTag({ commit }: { commit: Commit }, value: any) {
    commit("ADD_TAG", value);
  },
  delTag({ commit }: { commit: Commit }, name: string) {
    commit("DEL_TAG", name);
  },
  // 关闭左侧
  delLeftTag({ commit }: { commit: Commit }, path: string) {
    commit("DEL_BOTH_TAG", [path, "left"])
  },
  // 关闭右侧
  delRightTag({ commit }: { commit: Commit }, path: string) {
    commit("DEL_BOTH_TAG", [path, "right"])
  },
  // 关闭其他
  delOtherTag({ commit }: { commit: Commit }, path: string) {
    commit("DEL_OTHER_TAG", path)
  },
  // 关闭全部
  delAllTag({ commit }: { commit: Commit }) {
    commit("DEL_ALL_TAG");
  },
  // 设置国际化语言
  setLangauge({ commit }: { commit: Commit }, value: AppState['language']) {
    commit("SET_LANGAUGE", value);
  },
};

const getters = {
  // getters
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
};
